<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>task3</title>
        <style type="text/css">
        .clearfix{
                overflow: auto;
                border:2px solid #999;
                background:#eee;
        }
        .boxA { 
            display: inline-block; 
            background: white; 
            float: right; 
            margin: 20px; 
        }
        .boxB {
            display: inline-block; 
            float: left;
            margin: 20px; 
        }
        .teamName{
            padding:20px;
        }
       #one { 
            position: absolute; 
            border:1px solid #999;
            width:200px;
            height:120px;
        }
        #two{
            
            border:1px solid #999;
            width:120px;
            height:600px;
        }
        #small{
            width:80px;
            height:80px;
            background:#eee;
            border:2px solid #999;
        }
        .article{
            position: absolute; 
            top: 30px; 
            left: 240px; 
            width:960px;
            background:white;
            border:2px solid #999;
            overflow:auto;
        }
        </style>
    </head>
    <body>
        <div class="clearfix">
        <!--左侧栏 begin-->
        <div class="boxA" id="one">
            <div class="boxB" id="small">个人logo</div>
            <div style="padding-top: 20px;">团队名称</div>
        </div>
        <!--左侧栏 end-->

         <!--中间栏 begin-->
        <div class="article">
            <label style="margin:20px">
                <p>有一棵大榕树，它枝条丰满，叶子鲜绿，于是各地的动物都喜欢到他这里来承欢膝下。在树的膝下，它们很喜欢大声讨论自己去过的地方，听过的故事，学到的方言。</p>
                <p>燕子说：我跟你们讲，在四川我看到肥咚咚的熊猫，那哈老壳哦，上面两个黑眼圈，勒个坐凳儿好大的，好瓜哦!笑惨我咯~</p>
                <p>猴子打断她：你那个算啥，我在长白山看到一只傻狍子，艾玛!那可是真傻!有个老猎头朝它开了一枪没打中，把它给吓得跑了，结果你猜咋的?!那傻狍子过会儿又屁颠颠跑回来，看看刚才发生了啥事!啊哈哈逗死我了</p>
                <p>一阵哄笑声过后，海鸥的声音响起：你们造吗，我到过宝岛台湾哦~那里的美眉说话超嗲的~有兽我在想，神兽我学会像他们酱紫讲话，才会有人古琼气对我说，为直都宣你，宣你恩久了!</p>
                <p>老虎忍不住想按住海鸥暴打一顿：把舌头捋直了再说话!</p>
                <p>然后老虎拍拍尘土，指着蝴蝶笑道：“喂，雅蠛蝶，听说你去过日本，那边人都怎么问好啊?” 蝴蝶腼腆一笑：“抠你78，这是你好的意思，请多多指教哦。”</p>
                <p>最后，大榕树忍不住开口了：你们说的都灰常有意思，仍不仍带我也去看看?环游够了世界，我就肥家! 飞禽瞧不起大树没有翅膀，拒绝了。</p>
                <p>走兽说，你的普通话不够标准，也拒绝了。 大榕树爆发了：没翅膀怎样，普通发不飘准怎样，我有种子啊! 大伙齐声问：下载地址是啥? 大榕树邪魅一笑：哼!我不给!让你们黑我大胡建!</p>
            </label>
        </div>
        <!--中间栏 end-->

        <!--右侧栏 begin-->
        <div class="boxA" id="two">
            <div class="boxA" id="small"><img src="http://a2.qpic.cn/psb?/V12PUDxZ01x17N/4lrEiFlLd2RwJhRMTJ3Pv90Y8RCjrGArahOMZCs*dH4!/b/dIEBAAAAAAAA&bo=UABQAAAAAAAFACM!&rf=viewer_4"title="个人介绍"/> </div>
            <div class="boxA" id="small"><img src="http://a2.qpic.cn/psb?/V12PUDxZ01x17N/4lrEiFlLd2RwJhRMTJ3Pv90Y8RCjrGArahOMZCs*dH4!/b/dIEBAAAAAAAA&bo=UABQAAAAAAAFACM!&rf=viewer_4"title="个人介绍"/></div>
            <div class="boxA" id="small"><img src="http://a2.qpic.cn/psb?/V12PUDxZ01x17N/4lrEiFlLd2RwJhRMTJ3Pv90Y8RCjrGArahOMZCs*dH4!/b/dIEBAAAAAAAA&bo=UABQAAAAAAAFACM!&rf=viewer_4"title="个人介绍"/></div>
            <div class="boxA" id="small"><img src="http://a2.qpic.cn/psb?/V12PUDxZ01x17N/4lrEiFlLd2RwJhRMTJ3Pv90Y8RCjrGArahOMZCs*dH4!/b/dIEBAAAAAAAA&bo=UABQAAAAAAAFACM!&rf=viewer_4"title="个人介绍"/></div>
        </div>
        <!--右侧栏 end-->

       
        </div>
    </body>
</html>